@use "@styles/mixins/bem" as *;
@use "@styles/mixins/function" as *;
@use "@styles/mixins/namespace" as *;

@include b(progress-card) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 8rem;
  padding: 0 20px;
  background-color: cssVar(bg-color);
  border-radius: calc(cssVar(radius) + 4px);

  @include e(info) {
    display: flex;
    align-items: center;
    margin-block-end: 15px;

    @include m(left) {
      i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        background-color: cssVar(gray-300);
      }
    }

    @include m(right) {
      .percentage {
        display: block;
        margin-block-end: 4px;
        font-size: 1.5rem;
        font-weight: 600;
        color: cssVar(gray-900);
      }

      .title {
        font-size: 0.875rem;
        color: cssVar(gray-600);
      }
    }
  }

  :deep(.#{$el-namespace}-progress-bar__outer) {
    background-color: rgb(240 240 240);
  }
}
